<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产过程管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/layui.css" rel="stylesheet">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">生产过程管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人设置</a></dd>
                    <dd><a href="javascript:;">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">

            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">人员信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('person_list.html');">人员信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">物料信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('material_list.html');">物料信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:">设备信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:goPage('equipment_list.html');">设备信息列表</a></dd>
                        <dd><a href="javascript:;">其他功能模块</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text">
                <span class="layui-breadcrumb">
                  <a href="">工作任务</a>
                  <a><cite>物料信息管理</cite></a>
                </span>
            </blockquote>

            <!-- 查询条件表单  -->
            <!--            action="<%=request.getContextPath()%>/task/list-->
            <form class="layui-form layui-row layui-col-space16" >
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" id="material_factorysite_search" name="material_factorysite_search"  placeholder="厂址" class="layui-input" lay-affix="clear" style="width:200px" >
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" id="task_start" name="task_start" readonly placeholder="出厂日期" class="layui-input demo-table-search-date" style="width:200px">
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-inline layui-input-wrap">
                            <select id="material_type_search" name="material_type_search" lay-search style="width: 200px">
                                <option value="">物料类型</option>
                                <option>金属</option>
                                <option>合金</option>
                                <option>复合材料</option>
                                <option>有机材料</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" id="material_name_search" name="material_name_search"  placeholder="物料名称" class="layui-input" lay-affix="clear" style="width:200px" >
                    </div>
                </div>
                <div class="layui-col-md2">
                    <button id="search_button" type="button" class="layui-btn" lay-submit lay-filter="demo-table-search" style="width:200px">查询</button>
                </div>
                <div class="layui-col-md2" >
                    <a href="javascript:void(0)" id="btn_task_add" class="layui-btn layui-bg-blue" style="width:200px">新增物料</a>
                </div>
            </form>
            <!--
                            列表展示
			-->
            <table class="layui-table" id="task-table-search"></table>
        </div>
    </div>
</div>
<!-- 底部页脚部分 -->
<div class="footer">
    <p class="text-center">
        2024 &copy;
    </p>
</div>
</body>
<div id="editBox" style="display: none;">
    <form class="layui-form" lay-filter='task-form' action="#">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label width200">序号</label>
            <div class="layui-input-inline">
                <input type="text" id="material_id" name="material_id" placeholder="" autocomplete="off" class="layui-input" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label width200">物料编号</label>
            <div class="layui-input-inline">
                <input type="text" id="material_number" name="material_number" lay-verify="required" placeholder="请输入设备的编号" autocomplete="off" class="layui-input" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">物料名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="material_name" name="material_name" lay-verify="required" placeholder="请输入设备的名称" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">物料类型</label>
                <div class="layui-input-inline layui-input-wrap">
                    <select id="add_material_type" name="material_type" lay-verify="required" lay-search style="width: 200px">
                        <option value="">直接选择或搜索选择</option>
                        <option>金属</option>
                        <option>合金</option>
                        <option>复合材料</option>
                        <option>有机材料</option>
                        <option>其他</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">生产商</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input  type="text" name="material_manufacturer" id="material_manufacturer" lay-verify="required" placeholder="请输入设备生产商的名称" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">入库日期</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input  type="text" name="material_productiondate" id="material_productiondate" lay-verify="date|required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">厂址</label>
                <div class="layui-input-inline">
                    <input  type="text" name="material_factorysite" lay-verify="required" id="eq_store_date" placeholder="请输入设备的保质期(数字+年)" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">联系人</label>
                <div class="layui-input-inline">
                    <input type="text" name="material_contacts" id="material_contacts" lay-verify="required" placeholder="请输入售后联系人" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="material_telephone" id="material_telephone" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label width200">物料说明</label>
                <div class="layui-input-inline">
                    <input type="text" name="material_statement" id="material_statement" lay-verify="required" placeholder="请输入质量凭证信息(在保/失效)" autocomplete="off" class="layui-input" style="width: 200px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="delete">删除</a>
    </div>
</script>
<script type="text/javascript" src="../js/layui.js"></script>
<script>
    layui.use( function(){
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var table = layui.table;
        var form = layui.form;

        // 渲染
        laydate.render({
            elem: '#task_start'
        });
        laydate.render({
            elem: '#task_end'
        });

        // 创建表格实例
        let mainTable = table.render({
            id: 'test1',
            elem: '#task-table-search',
            url: 'http://localhost:8888/selectMaterial', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true,
            parseData: function (res) {
                var result;
                console.log(res);

                //(前端来实现)分页方法一：
                //这是前台 用res.data接受全部数据 再根据当前页的条件从全部数据中选取一部分数据显示出来
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result// 解析数据列表
                };
            },
            method:"post",
            headers: {'Access-Control-Allow-Origin': '*'},
            cols: [[
                {type: 'checkbox', title: '', fixed: true}, // 单选框
                {field:'material_id', title: 'ID', width:80, sort: true, fixed: true},
                {field:'material_number', title: '物料编号', minWidth:80,sort:true},
                {field:'material_name', title: '物料名称', minWidth:80},
                {field:'material_type', title: '物料类型', width:100},
                {field:'material_manufacturer', title: '生产商', minWidth: 100},
                {field:'material_productiondate', title: '入库日期', minWidth: 120},
                {field:'material_factorysite', title: '厂址', sort: true, width:100},
                {field:'material_contacts', title: '联系人', sort: true, width:120},
                {field:'material_telephone', title: '联系电话', sort: true, width:140},
                {field:'material_statement', title: '物料说明', sort: true, width:120},
                {fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]],
            loading: false,
            height: 'full',
            done: function (res, curr, count) {

            }
        });
        $("#search_button").click(function(){
            var material_name_search = $("#material_name_search").val();
            var task_start = $("#task_start").val();
            var material_factorysite_search = $("#material_factorysite_search").val();
            var material_type_search = $("#material_type_search").val();
            console.log(material_name_search);
            console.log(task_start);
            console.log(material_factorysite_search);
            console.log(material_type_search)
            table.reload('test1', {
                url: 'http://localhost:8888/selectMaterialByName',
                where: {
                    material_name: material_name_search,
                    material_productiondate: task_start,
                    material_factorysite: material_factorysite_search,
                    material_type:material_type_search
                },
                success: function f(e) {
                    layer.msg('操作成功');
                    layer.close(editBox); // 关闭对话框
                    mainTable.reload(); // 重新加载表格数据
                },
                error: function (xhr, status, error) {
                    // 失败回调函数，可用于处理请求失败的情况
                    console.error(xhr.responseText);
                }

            });
        });

        // 触发单元格工具事件
        table.on('tool(test1)', function(obj){ // 双击 toolDouble
            console.log(obj);
            // 触发单元格工具事件
            var rowData = obj.data; // 获得当前行数据
            if(obj.event === 'update'){
                let editBox = layer.open({
                    title: `<button type="button" class="layui-btn layui-bg-gray">
							<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b>
						  </button>
					`,
                    type: 1,
                    area: ['600px','500px'],
                    content: $('#editBox').html(),
                    success: function(){
                        // 对弹层中的表单进行初始化渲染
                        // var filed = data.field; //获取表单的字段
                        form.render();
                        // 表单提交事件
                        form.on('submit(form-submit)', function(data){
                            var filed = data.field;
                            // 获取表单字段值
                            // console.log(data);

                            // console.log(filed);
                            $.ajax({
                                url:"http://localhost:8888/saveMaterial",
                                type:"post",
                                headers: {'Access-Control-Allow-Origin': '*'},
                                data:{
                                    // 这个是后端接受的类的字段数据
                                    material_id:rowData.material_id,
                                    material_number:filed.material_number,
                                    material_name:filed.material_name,
                                    material_type:filed.material_type,
                                    material_manufacturer:filed.material_manufacturer,
                                    material_productiondate:filed.material_productiondate,
                                    material_factorysite:filed.material_factorysite,
                                    material_contacts:filed.material_contacts,
                                    material_telephone:filed.material_telephone,
                                    material_statement:filed.material_statement
                                },
                                success: function f(e) {
                                    layer.msg('操作成功');
                                    layer.close(editBox); // 关闭对话框
                                    mainTable.reload(); // 重新加载表格数据
                                },
                                error: function (xhr, status, error) {
                                    // 失败回调函数，可用于处理请求失败的情况
                                    console.error(xhr.responseText);
                                }
                            });
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
                laydate.render({
                    elem: '#material_productiondate'
                });
                //对表单元素进行赋值
                layui.form.val('task-form', {
                    "material_id":rowData.material_id,
                    "material_number":rowData.material_number,
                    "material_name":rowData.material_name,
                    "material_type":rowData.material_type,
                    "material_manufacturer":rowData.material_manufacturer,
                    "material_productiondate":rowData.material_productiondate,
                    "material_factorysite":rowData.material_factorysite,
                    "material_contacts":rowData.material_contacts,
                    "material_telephone":rowData.material_telephone,
                    "material_statement":rowData.material_statement
                });
            } else if(obj.event === 'delete'){
                layer.confirm('确定要删除该行数据吗？', function(index){
                    $.ajax({
                        url:"http://localhost:8888/deleteMaterial",
                        type:"post",
                        data:{
                            material_id:rowData.material_id,
                        },
                        success:function (e) {
                            layer.msg("操作成功");
                            mainTable.reload();
                        }
                    })
                });
            }
        }); // end table.on('tool(test1)')
        $('#btn_task_add').click(function(){
            editBox = layer.open({
                title: `<button type="button" class="layui-btn layui-bg-gray">
						<i class="layui-icon layui-icon-edit layui-font-12"></i> <b>任务信息编辑</b>
					  </button>
				`,
                type: 1,
                area: ['600px','500px'],
                content: $('#editBox').html(),
                success: function(){
                    // 对弹层中的表单进行初始化渲染
                    form.render();
                    // 表单提交事件
                    var data1 = {
                        "material_id":-1,
                        "material_number":"M001",
                        "material_name":"好东西"
                    }
                    layui.form.val('task-form',{
                        "material_id":data1.material_id,
                        "material_number":data1.material_number,
                        "material_name":data1.material_name
                    })

                    // 上述的语句是在新建表单任务的时候,给表单初始化一些值而已
                    form.on('submit(form-submit)', function(data1){
                        // 这里也可以做编辑的判定
                        var filed = data1.field; // 获取表单字段值
                        console.log(filed);
                        console.log(filed.material_id);
                        // 此处可执行 Ajax 等操作
                        var data = layui.form.val('task-form');

                        $.ajax({
                            url: "http://localhost:8888/saveMaterial",
                            type: "post",
                            headers: {'Access-Control-Allow-Origin': '*'},
                            data:{
                                material_id:filed.material_id,
                                material_number:filed.material_number,
                                material_name:filed.material_name,
                                material_type:filed.material_type,
                                material_manufacturer:filed.material_manufacturer,
                                material_productiondate:filed.material_productiondate,
                                material_factorysite:filed.material_factorysite,
                                material_contacts:filed.material_contacts,
                                material_telephone:filed.material_telephone,
                                material_statement:filed.material_statement
                            },
                            success:function (e) {
                                layer.msg('操作成功！');
                                layer.close(editBox);
                                mainTable.reload();
                            },
                            error: function (xhr, status, error) {
                                // 失败回调函数，可用于处理请求失败的情况
                                console.error(xhr.responseText);
                            }
                        })
                        return false; // 阻止默认 form 跳转
                    });
                }
            });
            laydate.render({
                elem:'#material_productiondate'
            });
        });
    }); // end layui.use(.....)
</script>
<script>
    function goPage(url) {
        window.location.href = url;
    }
</script>
</html>